<template>
    <div>
        <div class="activity-right" style="">
            <h3>直属会员</h3>
            <template style="margin-bottom:20px;">
                <div class="block el-select" style="margin-bottom:20px;">
                    <el-date-picker v-model="searchTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" >
                    </el-date-picker>
                     <el-button type="primary" @click="searchMember">搜索</el-button>
                </div>
            </template>
            <el-button style="float:right; margin-bottom:20px;" type="primary" @click="goBack">返回</el-button> 
            <el-button type="primary" style="float:right; margin-bottom:20px;margin-right:20px;" @click="useMemberHead">选择完毕</el-button>
            <el-table class="table-common" :data="data" element-loading-text="拼命加载中" style=" margin-top:30px;" @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="100" :selectable="selectable">
                </el-table-column>
                <el-table-column prop="headImage" label="会员头像" width="100" >
                    <template slot-scope="scope">
                        <img :src="scope.row.headImage" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="会员昵称" width="100">
                </el-table-column>
                <el-table-column prop="isUse" label="是否可用" width="100">
                    <template slot-scope="scope">{{scope.row.isUse == 0 ? '未使用' :(scope.row.isUse == 1 ? '已使用' : '')}}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="100">
                    <template slot-scope="scope">{{ $formate(scope.row.createTime,'yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
            </el-table>
            
            <section class="pagination" >
                <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                </el-pagination>
            </section>
          
        </div>
    </div>
</template>

<script>
import { getUnderMemberList, useMemberHead } from "../../data/postData";
export default {
    mounted() {
        this.getCustomerList(this.page)
       // new Date(new Date(new Date().toLocaleDateString()).getTime());
    },
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem("ddaigoUser")),
            data: null,
            total: null,
            size: 10,
            page: 1,
            name: "",
            customerArr:[],
            searchTime:[],
            disabled:false,
            checked:false
        };
    },
    methods: {
        //获取客户端用户列表
        getCustomerList() {
            var startTime = '',
                endTime = '' ;
            if(this.searchTime.length < 1){
               startTime = new Date(new Date(new Date().toLocaleDateString()).getTime()); 
               endTime = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
          
            }else{
                startTime = this.searchTime[0]
                endTime = this.searchTime[1]
            }
            var params = {
                data: {
                    "wxUid": this.$route.params.id,
                    "page": 1,
                    "size": 10,
                    "userStatus": 1,
                    "startTime": new Date(startTime).getTime(),
                    "endTime": new Date(endTime).getTime()
                }
            };
            this.$fetch.post(getUnderMemberList, params).then(res => {
                this.data = res.data;
                this.total = res.total;
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: "warning",
                    duration: 1000
                });
            });
        },
        goBack(){
            this.$router.go(-1)
        },
        handleSelectionChange(val){
            val.forEach(item=>{
                 this.customerArr.push(item.wxUid)
            })
        },
        handleChange(val){
            this.customerArr.push(val)
        },
        handlePageChange(val) {
            this.page = val;
            this.getCustomerList(this.page);
        },
        searchMember(){
            this.getCustomerList()
        },
        useMemberHead(){
            var params = {
                "data": {
                    "parentWxUid": this.$route.params.id,
                    "wxUids": this.customerArr
                }
            }
            this.$fetch.post(useMemberHead, params).then(res => {
                this.$message({
                    message: res.message,
                    type: "success",
                    duration: 1000
                });
                setTimeout(() =>{
                    this.getCustomerList()
                },1000)
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: "warning",
                    duration: 1000
                });
            })
        },
         selectable(row,index){
            if(row.isUse  == 1){
                return false;
            }else{
                return true;
            }
        }
    }
};
</script>

<style scoped lang="less">
.activity-right {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0;
    }
    .select_type {
        margin-bottom: 20px;
        position: relative;
        span {
            margin-right: 10px;
        }
        button {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
.el-table__body-wrapper {
    margin-top: 15px;
    img {
        width: 40%;
    }
    a {
        color: #409eff;
    }

}
.right {
    float: right;
    z-index: 999999999;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
</style>